<template>
	<uv-picker ref="ssqRef" closeOnClickOverlay :columns="ssq_columns" :defaultIndex="conf.ssq_defaultIndex"
		@confirm="ssq_confirm" @change="ssq_change" confirmColor="#348B8A"></uv-picker>
</template>

<script setup>
	import {
		nextTick,
		watch
	} from 'vue';
	import pca from './pca.js';

	let props = defineProps({
		modelValue: {
			default: () => [0, 0, 0]
		},
		level: {
			type: [Number, String],
			default: 3
		}
	});


	var ssqRef = Vue.ref();
	let pca_data = [];

	for (let i in pca) {
		let ite = {
			label: i,
			value: i,
			children: []
		};
		for (let j in pca[i]) {
			let ite2 = {
				label: j,
				value: j,
				children: []
			};
			for (let k in pca[i][j]) {
				let ite3 = {
					label: pca[i][j][k],
					value: pca[i][j][k]
				};
				if (props.level == 3) {
					ite2.children.push(ite3);
				}
			}
			ite.children.push(ite2);
		}
		pca_data.push(ite);
	}

	const emits = defineEmits(['update:modelValue', 'change']);

	let conf = Vue.ref({
		show: false,
		page: 'list',
		ssq_defaultIndex: [0, 0, 0],
		show_map: false
	});
	const ssq_columns = Vue.ref({});
	const initAddress = () => {
		if (Array.isArray(props.modelValue) && props.modelValue.length == props.level) {
			var province_index = pca_data.findIndex((v) => v.value == props.modelValue[0]);
			if (province_index !== -1) {
				var province = pca_data[province_index];
				var city_index = province.children.findIndex((v) => v.value == props.modelValue[1]);
				if (city_index !== -1) {
					var city = province.children[city_index];
					var area_index = city.children.findIndex((v) => v.value == props.modelValue[2]);

					if (props.level == 3) {
						if (area_index !== -1) {
							ssq_columns.value = [
								pca_data.map((v) => v.label),
								pca_data[province_index].children.map((v) => v.label),
								pca_data[province_index].children[city_index].children.map((v) => v.label)
							];
							nextTick(() => {
								conf.value.ssq_defaultIndex = [province_index, city_index, area_index];
							});
						}
					} else {
						ssq_columns.value = [
							pca_data.map((v) => v.label),
							pca_data[province_index].children.map((v) => v.label)
						];
						nextTick(() => {
							conf.value.ssq_defaultIndex = [province_index, city_index];
						});
					}

				}
			}
		} else {
			ssq_columns.value = [
				pca_data.map((v) => v.label),
				pca_data[conf.value.ssq_defaultIndex[0]].children.map((v) => v.label)
			];
			if (props.level == 3) {
				ssq_columns.value.push(pca_data[conf.value.ssq_defaultIndex[0]].children[conf.value.ssq_defaultIndex[
					1]].children.map(
					(v) => v.label
				));
			}
		}
	};
	// initAddress();
	watch(
		() => props.modelValue,
		() => {
			initAddress();
		}, {
			immediate: true,
			deep: true
		}
	);
	// ssq_columns.value  = Vue.computed(() => {
	// 	return [
	// 		pca_data.map(v => v.label),
	// 		pca_data[conf.value.ssq_defaultIndex[0]].children.map(v => v.label),
	// 		pca_data[conf.value.ssq_defaultIndex[0]].children[conf.value.ssq_defaultIndex[1]].children.map(v =>
	// 			v.label),
	// 	]
	// })

	const setColumns = () => {
		ssq_columns.value = [
			pca_data.map(v => v.label),
			pca_data[conf.value.ssq_defaultIndex[0]].children.map(v => v.label)
		]

		if (props.level == 3) {
			ssq_columns.value.push(pca_data[conf.value.ssq_defaultIndex[0]].children[conf.value.ssq_defaultIndex[1]]
				.children.map(v =>
					v.label));
		}
	}

	let ssq_confirm = (v, k) => {
		var value = [
			pca_data[v.indexs[0]].value,
			pca_data[v.indexs[0]].children[v.indexs[1]].value
		];
		if (props.level == 3) {
			value.push(pca_data[v.indexs[0]].children[v.indexs[1]].children[v.indexs[2]].value)
		}
		emits('update:modelValue', value);
		emits('change', value);
	};

	let ssq_change = (v) => {
		conf.value.ssq_defaultIndex = v.indexs;
		if (v.columnIndex == 0) {
			conf.value.ssq_defaultIndex[0] = v.indexs[0];
			conf.value.ssq_defaultIndex[1] = 0;
			if (props.level == 3) {
				conf.value.ssq_defaultIndex[2] = 0;
			}
		}
		if (v.columnIndex == 1) {
			conf.value.ssq_defaultIndex[1] = v.indexs[1];
			if (props.level == 3) {
				conf.value.ssq_defaultIndex[2] = 0;
			}
		}
		if (v.columnIndex == 2) {
			if (props.level == 3) {
				conf.value.ssq_defaultIndex[2] = v.indexs[2];
			}
		}

		setColumns()
		ssqRef.value.setIndexs(conf.value.ssq_defaultIndex);
	};

	defineExpose({
		open() {
			ssqRef.value.open();
		},
		initAddress
	});
</script>

<style></style>